<template>
    <div class="test2">
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item :to="{ path: '/AreaManagement' }">片区管理</el-breadcrumb-item>
            <el-breadcrumb-item v-if="pageType==='see'">查看</el-breadcrumb-item>
            <el-breadcrumb-item v-if="pageType==='edit'">编辑</el-breadcrumb-item>
            <el-breadcrumb-item v-if="pageType==='add'">新增</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form v-if="pageType!== 'see'" :model="ruleForm" :rules="rules" ref="ruleform" label-width="140px" class="demo-ruleForm">
            <el-form-item label="片区名称:" prop="name" >
                <el-input v-model.trim="ruleForm.name" placeholder="请输入片区名称"  maxlength="20"  style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item label="归属区域:" prop="areaId">
                <el-select v-model="ruleForm.areaId" :disabled="pageType==='edit'" filterable style="width: 400px;" @change="selectedarea">
                    <el-option v-for="(item,index) in regionlist"
                               :key="index"
                               :label="item.name"
                               :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="关联城市、区县:" required>
                <el-tree
                  :data="relatedreglion"
                  show-checkbox
                  node-key="id"
                  ref="tree"
                  :props="defaultProps"
                  :default-expanded-keys="selectids"
                  :default-checked-keys="selectids"
                  >
                </el-tree>
            </el-form-item>
            <el-form-item >
                <el-button style="margin-left: 100px;" type="primary" @click="ensurehander('ruleform')">保存</el-button>
                <el-button type="primary" @click="$router.push({path: '/AreaManagement'})">取消</el-button>
            </el-form-item>
        </el-form>
        <div v-else>
            <el-form ref="ruleform" label-width="140px" class="demo-ruleForm">
                <el-form-item label="片区名称:" required>
                    {{infodata.name}}
                </el-form-item>
                 <el-form-item label="归属区域:" required>
                    {{infodata.areaName}}
                </el-form-item>
                <div style="display: flex; flex-wrap: nowrap; color: #2c3e50;font-size: 14px;">
                    <div class="star" style="flex:0 0 130px; color:#606266; text-align: right;margin-right: 10px;">关联城市、区县:</div>
                    <div>
                       <div style="padding-bottom: 15px;" v-for="(item,index) in infodata.detailList">
                            <span style="display: inline-block;margin-right: 20px" v-for="item2 in item.cityAreaName">
                                {{item2}}
                            </span>
                        </div>
                    </div>
                </div>
                <el-button style="margin: 20px 50%" type="primary" @click="$router.push({path: '/AreaManagement'})">返回</el-button>
           </el-form>
        </div>
    </div>
</template>

<script>
import api from "@/api/apiPath"

export default {
    name:"AreaManagementDetail",
    data() {
        return {
            pageType:'',
            regionlist:[],
            selectids:[],
            relatedreglion: [],
            infodata:{},//查看数据data
            regionId:undefined,//片区id
            tempdata:{},//处理后的数据
            defaultProps: {
              children: 'children',
              label: 'name'
            },
            ruleForm: {
                name:'',
                head:'',
                areaId:'',
            },
            rules: {
                name:[
                    {required:true,message:'请输入片区名称',trigger:'blur'}
                ],
                areaId:[
                   {required:true,message:'请选择归属区域',trigger:'blur'}
                ]
            }     
        }
    },
    created() {
        this.pageType = this.$route.query.pageType
        if (this.pageType == 'see' || this.pageType == 'edit') {
            this.getinfo()
        }
        if(this.pageType == 'add' || this.pageType == 'edit'){
            this.getarealist()
        }
    },
    methods: {
        getinfo(){
            this.axios.get(api.REGIONDETAIL+this.$route.query.id).then(res=>{
                if (res.data.code == 200) {
                    this.infodata = res.data.data
                    //编辑
                    if (this.pageType==='edit') {
                        this.ruleForm.name = this.infodata.name
                        this.ruleForm.areaId = this.infodata.areaId
                        this.selectedarea()
                    }
                }
            })
        },
        selectedarea(){
           this.getcity()
        },
        //获取省市区县
        getcity(){
            this.axios.post(api.REGIONGETCITY,{areaId:this.ruleForm.areaId,regionId:this.$route.query.id}).then(res=>{
                if (res.data.code == 200) {
                    this.relatedreglion = res.data.data
                    this.consversionData()
                }
            })
        },
        //数据转换
        consversionData(){
            this.selectids,this.tempdata=[]
            for (let item of this.relatedreglion) {
                let obj = {}
                obj.id = item.id
                obj.name = item.name
                obj.upperId = item.upperId
                this.tempdata[item.id] = obj
                for(let item2  of item.children){
                    let obj2 = {}
                    obj2.id = item2.id
                    obj2.name = item2.name
                    obj2.upperId = item2.upperId
                    this.tempdata[item2.id] = obj2
                    for(let item3 of item2.children){
                        let obj3 = {}
                        obj3.id = item3.id
                        obj3.name = item3.name
                        obj3.upperId = item3.upperId
                        this.tempdata[item3.id] = obj3
                        if (this.pageType==='edit' && item3.flag ===0){
                            //需要过滤掉选中父级的id
                            this.selectids.push(item3.id)
                        }
                    }
                }
            }
        },
        getarealist(){
            this.axios.get(api.REGIONGETAREALIST).then(res=>{
                if (res.data.code == 200) {
                    this.regionlist = res.data.data
                }
            })
        },
        ensurehander(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                    let temparr =[]//选择的data
                    temparr =this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
                    if (temparr.length==0) {
                        this.$message({
                            message:'请选择关联城市、区县',
                            type:'warning'
                        })
                        return
                     }
                    let sdata =[]
                    for(let id of temparr){
                       sdata.push(this.tempdata[id]) 
                    }
                    let areadata = this.regionlist.find(item =>{
                        return item.id == this.ruleForm.areaId
                    })      

                    let obj= {}
                    obj.name = this.ruleForm.name
                    obj.areaId = this.ruleForm.areaId
                    obj.areaName = areadata['name']
                    obj.provincesArray = sdata
                    
                    let url= ''
                    if (this.pageType==='edit') {
                        obj.id = this.$route.query.id
                        url = api.REGIONEDIT
                    }else {
                        url = api.GEGIONCEATE
                    }
                    this.axios.post(url,obj).then(res=>{
                        if (res.data.code == 200) {
                            this.$message({
                                message:this.pageType==='edit'?'编辑成功':'新增成功',
                                type: 'success'
                            });
                        }
                        this.$router.go(-1)
                    })
              }else {
                return false
              }
            });
        },

    }
}
</script>
<style lang="stylus" scoped>
    .star:before
        content:'*'
        color: red
        margin-right: 2px        
        
</style>